<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Adda - Social Network HTML Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.comcss?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bicon.min.css">
    <!-- Flat Icon CSS -->
    <link rel="stylesheet" href="assets/css/vendor/flaticon.css">
    <!-- audio & video player CSS -->
    <link rel="stylesheet" href="assets/css/plugins/plyr.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="assets/css/plugins/slick.min.css">
    <!-- nice-select CSS -->
    <link rel="stylesheet" href="assets/css/plugins/nice-select.css">
    <!-- perfect scrollbar css -->
    <link rel="stylesheet" href="assets/css/plugins/perfect-scrollbar.css">
    <!-- light gallery css -->
    <link rel="stylesheet" href="assets/css/plugins/lightgallery.min.css">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
	<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>

</head>

<body class="bg-transparent">

    <main>
        <div class="main-wrapper pb-0 mb-0">
            <div class="timeline-wrapper">
                <div class="timeline-header">
                    <div class="container-fluid p-0">
                        <div class="row no-gutters align-items-center">
                            <div class="col-lg-6">
                                <div class="timeline-logo-area d-flex align-items-center">
                                    <div class="timeline-logo">
                                            <img src="assets/images/logo/logo.png"  salt="timeline logo">
                                    </div>
                                    <div class="timeline-tagline" >
                                        <h6 class="tagline">欢迎来到微坊，在这里可以分享你的趣事</h6>
                                    </div>
                                </div>
                            </div>
							<div class="col-lg-6">
							    <div class="login-area">
							        <div class="row align-items-center" >
							            <div class="col-12 col-sm">
							                <p class="lead" style="color: #D6E9C6;">人生得一知已足矣，斯世当以同怀视之。——鲁迅</p>
							            </div>
							        </div>
							        </div>
							    </div>
							</div>
                           <!-- <div class="col-lg-6">
                                <div class="login-area">
                                    <div class="row align-items-center">
                                        <div class="col-12 col-sm">
                                            <input type="text" placeholder="Email or Userame" class="single-field">
                                        </div>
                                        <div class="col-12 col-sm">
                                            <input type="password" placeholder="Password" class="single-field">
                                        </div>
                                        <div class="col-12 col-sm-auto">
                                            <button class="login-btn">Login</button>
                                        </div>
                                    </div>
                                </div>
                            </div>-->
                        </div>
                    </div>
                </div>
                <div class="timeline-page-wrapper">
                    <div class="container-fluid p-0">
                        <div class="row no-gutters">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="timeline-bg-content bg-img" data-bg="assets/images/timeline/adda-timeline.jpg">

                                </div>
                            </div>
			
                            <div class="col-lg-6 order-1 order-lg-2 d-flex align-items-center justify-content-center">
                                <div class="signup-form-wrapper" >
                                    <h1 class="create-acc text-center">welcome to  wefun</h1>
                                    <div class="signup-inner text-center">
                                        <h3 class="title">注册</h3>
                                        <form class="signup-inner--form" >
                                            <div class="row">
														<div class="col-12">
															<span style="margin-left: inherit;float: left;height: 20px;" id="nameMsg"></span>
														</div>
											     <div class="col-12">
                                                    <input type="text" id="username"class="single-field" placeholder="创建一个账户吧~">
                                                </div>
                                                <div class="col-12">
                                                    <input type="password" id="password" class="single-field" placeholder="密码要记住">
                                                </div>
												<div class="col-12">
													<span style="margin-left: inherit;float: left;height: 20px;" id="phoneMsg"></span>
												</div>
                                                <div class="col-12">
                                                    <input type="text" id="phonenumber"class="single-field" placeholder="给我call你的方式！">
                                                </div>
												<div class="col-12">
												     <input type="text" id="nickname"  class="single-field" placeholder="昵称" value="我是喵星人~"  >
											    </div>
                                                <div class="col-md-6">
                                                    <select class="nice-select" name="sortby">
                                                        <option value="trending">性别</option>
                                                        <option value="sales">男</option>
                                                        <option value="sales">女</option>
                                                    </select>
                                                </div>
                                               <div class="col-md-6">
                                                    <input type="date" id="birthday"  class="single-field"   placeholder="#你的破壳日">
                                                </div> 
                                              <!-- <div class="col-12">
                                                    <select class="nice-select" name="sortby">
                                                        <option value="trending">Country</option>
                                                        <option value="sales">Bangladesh</option>
                                                        <option value="sales">Noakhali</option>
                                                        <option value="sales">Australia</option>
                                                        <option value="sales">China</option>
                                                    </select>
                                                </div> -->
                                                <div class="col-12">
                                                    <button class="submit-btn">创建账户</button>
                                                </div>
                                            </div>
                                           <!-- <h6 class="terms-condition">I have read & accepted the <a href="#">terms of use</a></h6> -->
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
<script>


    $("#username").change(function () {
        var data = $("#addForm").serialize();
       //ajax请求
       // $(xxxx).text() .html() .val()  小括号中没有值就是取值,有值就是赋值
       var ename =$("#username").val();
       $.get("/user/checkUserName"+ename,function (result) {
           //OK NOOK
           if (result=='OK'){
               //prop 专门用于
               //$("#mysub").prop("disabled",false);
               $("#nameMsg").text("星球中已存在该用户！").css({"color":"green"})
           }
           else
           {
               $.get("/user/register",data,function(result)
               {
                   if(result=='OK')
                   {
                       location.href("login.jsp");
                   }
                   else
                   {
                       location.href("regist.jsp");
                   }
               })
           }
       });
   });
    $("#nickname").focus(function(){
           if($(this).val()==this.defaultValue){
               $(this).val("");
            }
    });
   
      $("#nickname").blur(function(){
            if($(this).val()==""){
               $(this).val(this.defaultValue);
            }
       });
$("#phonenumber").change(function () {
	//alert(1);
        let phoneError=/^1[3|4|5|6|7|8|9]\d{9}$/;
               //只发送请求不需要回调
               var phoneNumber = $("#phonenumber").val();
               if (phoneNumber == ''||!phoneError.test(phoneNumber)) {
				   //alert(1);
                  $("#phoneMsg").text("笨蛋，电话错了").css(
				  {
					  color:'#ff0000',
					 
				  })
				    return false;
        }
		})
</script>
    <!-- JS
============================================ -->

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- jQuery JS -->
    
    <!-- Popper JS -->
    <script src="assets/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <!-- Slick Slider JS -->
    <script src="assets/js/plugins/slick.min.js"></script>
    <!-- nice select JS -->
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <!-- audio video player JS -->
    <script src="assets/js/plugins/plyr.min.js"></script>
    <!-- perfect scrollbar js -->
    <script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
    <!-- light gallery js -->
    <script src="assets/js/plugins/lightgallery-all.min.js"></script>
    <!-- image loaded js -->
    <script src="assets/js/pluginsimagesloaded.pkgd.min.js"></script>
    <!-- isotope filter js -->
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>

</body>

</html>